<template>
  <div>
    <!-- 父给 -->
    <my-goods title="广西螺蛳粉" :price="15" desc="表锅喜欢次哦" />
    <my-goods
      title="湖南臭豆腐"
      :price="10"
      desc="长沙臭豆腐，闻起来臭，吃起来也很臭"
    />
    <my-goods
      title="电饭锅煮榴莲"
      :price="999"
      desc="邻居都会怀疑你再煮一些了不起的东西"
    />

    <!-- 
      不加冒号代表写死的，写什么就是什么
      加冒号，代表绑定数据
     -->
    <my-goods
      :title="list[0].name"
      :price="list[0].price"
      :desc="list[0].desc"
    />

    <!-- 再次证明不加冒号给的都是字符串 -->
    <!-- 加冒号代表右边是js表达式，表达式直接写数字就是数字 -->
    <my-goods title="隆江猪脚饭" :price="15" />
  </div>
</template>

<script>
import MyGoods from './components/MyGoods.vue'
export default {
  components: {
    MyGoods
  },

  data () {
    return {
      list: [
        { id: 11, name: '潮汕粥', price: 99, desc: '营养美味' },
        { id: 33, name: '猪脚饭', price: 15, desc: '肥肥的' },
        { id: 39, name: '沙县小吃', price: 14, desc: '吃蒸饺和汤' },
        { id: 434, name: '自选快餐', price: 14, desc: '随便选' }
      ]
    }
  }
}
</script>

<style></style>
